<template>
  <div class="login-container">
    <chu-form ref="formRef" style="width:50vw">
      <chu-group cols="1">
        <chu-text :rules="['required','email']" placeholder="用户名一般是您的邮箱nginx" v-model="email">用户名</chu-text>
      </chu-group>
      <chu-group cols="1">
        <chu-text required type="password" placeholder="请输入密码" v-model="password">密码</chu-text>
      </chu-group>
      <chu-group cols="1" class="mt-3" align="center">
        <chu-button @clickn="login" width="400px">登陆</chu-button>
      </chu-group>
    </chu-form>
  </div>
</template>

<script lang='ts'>
import { useRouter } from 'vue-router'
import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { resAlert } from '@/static/util/commonUtil'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'Login',
  setup () {
    // 表单初始值
    const email = ref('')
    const password = ref('')
    const formRef = ref()
    const router = useRouter()
    const store = useStore<StoreProp>()
    const login = async () => {
      console.log('ref: ', (formRef.value.$el as HTMLElement).dataset)

      const res = await formRef.value.formCheck()
      if (res.checkRes) {
        try {
          const reqDataLogin = {
            email: email.value,
            password: password.value
          }
          await store.dispatch('loginAll', reqDataLogin)
          ElMessage.success('登陆成功')
          router.push({ name: 'Home' })
        } catch (error) {
          console.error(error)

          resAlert('登陆失败', error)
        }
      }
    }
    return {
      email,
      password,
      login,
      formRef
    }
  }
})
</script>

 <style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contain1 {
  width: 200px;
  height: 400px;
  overflow: hidden;
}
.contain2 {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  overflow: scroll;
}
.item1 {
  width: 100%;
  height: 50px;
  border: 1px solid green;
}
</style>
